<html> <head> <script src="./d3/d3-4.7.3/d3.js"></script> </head> <body>
    <p>Hello World 1</p>
    <p>Hello World 2</p>
    <script>
        var p = d3.select("body") // select 选择元素的第一个
            .selectAll("p"); // selectAll 选择元素的所有, 会自动遍历
        p.text("www.ourd3js.com").style("color", "red").style("font-size", "72px");

        var str = "China";
        p.datum(str);  // 绑定一个数据到选择集上
        p.text(function(d, i) { return "第 " + i + " 个元素绑定的数据是 " + d; });  // 自动遍历
        // 无名函数 function(d, i), d 代表与某元素绑定的数据, i 代表数据的索引号, ** 这个函数很常用 **
        // function(d), d 代表与某元素绑定的数据, 实现了重构
        var dataset = ["I like dog", "I like cat", "I like snake"];
        p.data(dataset)
        .text(function(d, i){ return d; });
    </script>

    <p id="myid">Apple</p>
    <p>Pear</p>
    <p>Banana</p>
    <script type="text/javascript" charset="utf-8">
        d3.select("body").append("p").text("append p element");  // 在末尾添加一个元素
        d3.select("body").insert("p", "#myid").text("insert p element");  // 在 body 中 id 为 myid 的元素前添加一个段落元素
        d3.select("body").select("#myid").remove();
    </script>
</body> </html>
